<template>
  <div>
    <h1>职位列表：</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <p>职位：{{ item.name }}</p>
        <p>工资：{{ item.monkey }}</p>
      </li>
    </ul>
    <hr />
    <h1>工资大于1W的职位：</h1>
    <ul>
      <li>
        {{ highOffer }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup () {
    /**
     * 需求：
     * 1. 展示职位信息=》定义一个列表数据
     * 2. 计算职位工资大于1e4,展示到另外一个列表
     */
    // 全部职位数据
    const list = ref([
      { id: 0, name: '前端开发-阿里', monkey: 8e3 },
      { id: 1, name: '前端开发-字节', monkey: 2e4 },
      { id: 2, name: '前端开发-百度', monkey: 2e5 }
    ])
    // 计算得到：工资大于1W的职位
    const highOffer = computed(() => {
      return list.value.filter(item => item.monkey > 1e4)
    })
    return { list, highOffer }
  }
}
</script>

<style lang="scss" scoped>
</style>
